Text formatters (1/30)
How can you centre text vertically and horizontally inside a box?
    Centering Text in a Box Using CSS

    There are several ways to center text both vertically and horizontally inside a container. The best method depends on whether the container has a fixed height or uses flexible layout systems like Flexbox or Grid.

    Common Methods for Centering Text
    • Using Flexbox: Set the container to `display: flex`, then use `justify-content: center` for horizontal alignment and `align-items: center` for vertical alignment.
    • Using Grid: Set the container to `display: grid` and use `place-items: center` to center content both vertically and horizontally.
    • Using Positioning: With `position: relative` on the container and `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)` on the text, you can center it regardless of container size.
    • Using Line Height: For single-line text in a fixed-height box, set `line-height` equal to the container height to center vertically and use `text-align: center` for horizontal centering.
    Example: Flexbox Centering
    Example: Grid Centering
    Example: Absolute Positioning Centering

    These methods allow precise vertical and horizontal centering, whether you have dynamic content, multiple lines of text, or responsive layouts.

    Key Takeaways
    • Flexbox and Grid are the most flexible and recommended methods for centering content.
    • Absolute positioning works well for fixed-size containers or overlay elements.
    • Line-height method is limited to single-line text with a fixed container height.
    • Always test centering in responsive scenarios to ensure consistent alignment.